<template>
  <div class="tab-layout" :class="layoutType" @click.stop="none">
    <div class="body">
      <!-- layout -->
      <div class="layout">
        <div class="title">导播布局</div>
        <div class="list">
          <div
            class="box"
            @click="chooseLayout(index, item.selected)"
            v-for="(item, index) in layoutList"
            :key="index"
          >
            <img
              v-if="layoutIndex != index + 1"
              :src="item.notSelected"
              alt=""
            />
            <img v-else :src="item.selected" alt="" />
          </div>
        </div>
      </div>
      <!-- 会议场景 -->
      <div class="scene">
        <div class="title">会议场景</div>
        <div class="list">
          <img
            @click="chooseScene(1)"
            src="@/assets/img/layout/pic-go-lay.png"
            alt=""
          />
          <img
            @click="chooseScene(2)"
            src="@/assets/img/layout/pic-rest-lay.png"
            alt=""
          />
          <img
            @click="chooseScene(3)"
            src="@/assets/img/layout/pic-end-lay.png"
            alt=""
          />
        </div>
      </div>
      <!-- 按钮 -->
      <div class="button_list" v-if="layoutType == 'start'">
        <div class="button start" @click="startMeeting">确认开始</div>
        <div class="button close" @click="close">取消</div>
      </div>
    </div>
    <div class="triangle" v-if="layoutType == 'change'"></div>
  </div>
</template>

<script>
export default {
  props: {
    layoutIndex: {
      type: [Number,String],
      default: 1,
    },
    layoutType: {
      type: String,
      default: "start",
    },
  },
  data() {
    return {
      layoutList: [
        {
          selected: require("@/assets/img/layout/pic-lay01-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay01-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay02-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay02-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay03-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay03-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay04-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay04-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay05-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay05-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay06-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay06-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay07-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay07-noselected.png"),
        },
        {
          selected: require("@/assets/img/layout/pic-lay08-selected.png"),
          notSelected: require("@/assets/img/layout/pic-lay08-noselected.png"),
        },
      ],
      index: "",
      url: "",
    };
  },
  computed: {},
  mounted() {},
  methods: {
    none() {},
    startMeeting() { 
      this.$emit("update:layoutIndex", this.index + 1);
      this.$emit("hideLayout", this.url);
      this.$emit('startMeeting')
    },
    close() {
      this.$emit("hideLayout");
    },
    chooseLayout(index, url) {
      this.index = index;
      this.url = url;
      if (this.layoutType == "change") {
        this.$confirm("确认修改导播布局", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "切换成功",
            });
            this.$emit("update:layoutIndex", index + 1);
            this.$emit("hideLayout", url);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消切换",
            });
          });
        return;
      }
      this.$emit("update:layoutIndex", index + 1);
    },
    chooseScene(index) {
      if (this.layoutType == "change") {
        let src = "";
        if (index == 1) {
          src = "确认切换场景1?";
        }
        if (index == 2) {
          src = "确认切换场景2?";
        }
        if (index == 3) {
          src = "确认切换场景3?";
        }
        this.$confirm(src, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "切换成功",
            });
            this.$emit("hideLayout");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消切换",
            });
          });
        return;
      }
    },
  },
};
</script>

<style lang="scss">
.tab-layout {
  cursor: default;
  &.start {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /*50%为自身尺寸的一半*/
  }
  &.change {
    z-index: 1;
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translate(-50%, 0); /*50%为自身尺寸的一半*/
  }
  .body {
    width: 323px;
    // height: 260px;
    // border: solid 1px red;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 12px 38px 11px rgba(0, 0, 0, 0.05),
      0px 8px 21px 0px rgba(0, 0, 0, 0.08), 0px 5px 8px -6px rgba(0, 0, 0, 0.12);
    padding: 12px 15px 20px;
    display: flex;
    flex-direction: column;
    .layout {
      width: 100%;
      .title {
        font-size: 10px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        line-height: 14px;
        margin-bottom: 5px;
      }
      .list {
        display: grid;
        grid-row-gap: 8px;
        grid-column-gap: 8px;
        grid-template-columns: repeat(4, 1fr);
        .box {
          width: 67px;
          cursor: pointer;
          height: 52px;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .scene {
      .title {
        font-size: 10px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        line-height: 14px;
        margin-bottom: 5px;
        margin-top: 12px;
      }
      .list {
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        img {
          width: 91px;
          height: 51px;
          cursor: pointer;
        }
      }
    }

    .button_list {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      .button {
        width: 100px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;

        font-size: 13px;
        font-weight: 400;
        &.start {
          color: #ffffff;
          margin-right: 10px;
          background: #475aa7;
        }
        &.close {
          color: #000000;
          background: #ffffff;
          border: 1px solid #d9d9d9;
        }
      }
    }
  }
  .triangle {
    width: 0;
    height: 0;
    border-left: 16.5px solid transparent;
    border-right: 16.5px solid transparent;
    border-top: 20px solid #ffffff;
    margin: 0 auto;
  }
}
</style>
